<template>
<div>
	<div class="banner" @click="handleBannerClick">
		 <img class="banner-img" :src="bannerImg">
		 <div class="banner-info">
		 	<div class="banner-title">{{this.sightName}}</div>
		 	<div class="banner-numble">
		 		<span class="iconfont banner-icon">&#xe692;</span>{{this.bannerImgs.length}}
		 	</div>
		 </div>
	</div>
	<common-gallary :imgs="bannerImgs" v-show="showGallary" @close="handleGallaryClose"></common-gallary>
</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
	name:'DetailBanner',
	props:{
		sightName:String,
		bannerImg:String,
		bannerImgs:Array
	},
	data () {
		return{
			showGallary:false,			
		}
	},
	methods: {
		handleBannerClick (){
			this.showGallary=true
		},
		handleGallaryClose (){
			this.showGallary=false
		}
	},
	components: {
		CommonGallary
	}
}
</script>

<style lang="stylus" scoped>
.banner
 position:relative
 overflow:hidden
 height:0
 padding-bottom:55%
.banner-img
 width:100%
.banner-info
 display:flex
 position:absolute
 left:0
 bottom:0
 right:0
 line-height:.6rem
 color:#fff
 background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
.banner-title
 padding:0 .1rem
.banner-numble
 position:absolute
 right:.15rem
 bottom:.15rem
 padding:0 .2rem
 height:.32rem
 line-height:.32rem
 margin-top:.1rem

 border-radius:.1rem
 background:rgba(0,0,0,.2)
 
.banner-icon
 font-size:.24rem
</style>